<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<head>
<style>
div {
  background-color: #4CAF50;
  padding: 10px;
}

div.first {
  opacity: 0.1;
}

div.second {
  opacity: 0.3;
}

div.third {
  opacity: 0.6;
}
</style>
</head>
<body>
<h1>透明框</h1>
    <p>当使用 opacity 属性为元素背景添加透明度时
    其所有子元素也将变为透明。
    这可能会使完全透明的元素内的文本难以阅读：</p>
    <div class="first"><p>opacity 0.1</p></div>
    <div class="second"><p>opacity 0.3</p></div>
    <div class="third"><p>opacity 0.6</p></div>
    <div><p>opacity 1 (default)</p></div>
</body>
</html>